<template>
  <div class="project-library">
    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索项目"
        class="search-input"
        clearable
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>

      <el-radio-group v-model="selectedTag" @change="handleTagChange">
        <el-radio-button label="全部">全部</el-radio-button>
        <el-radio-button 
          v-for="tag in tags" 
          :key="tag" 
          :label="tag"
        >
          {{ tag }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 项目列表 -->
    <div class="project-list">
      <el-row :gutter="20">
        <el-col 
          v-for="project in projects" 
          :key="project.id" 
          :xs="24" 
          :sm="12" 
          :md="8" 
          :lg="6"
        >
          <el-card class="project-card" shadow="hover">
            <div class="card-header">
              <h3>{{ project.title }}</h3>
              <el-tag 
                v-for="tag in project.tags" 
                :key="tag"
                class="tag"
              >
                {{ tag }}
              </el-tag>
            </div>
            <div class="card-content">
              <p class="description">{{ project.description }}</p>
              <div class="meta">
                <span class="time">更新时间：{{ project.updateTime }}</span>
                <span class="downloads">下载次数：{{ project.downloadCount }}</span>
              </div>
            </div>
            <div class="card-footer">
              <el-button 
                type="primary" 
                @click="handleDownload(project.downloadUrl, project.title)"
              >
                下载资料
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 空状态 -->
    <el-empty
      v-if="projects.length === 0"
      description="暂无相关项目"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getProjectTags, getProjectList, downloadProject } from '@/api/project'
import { ElMessage } from 'element-plus'

// 数据
const searchKeyword = ref('')
const selectedTag = ref('全部')
const tags = ref([])
const projects = ref([])

// 获取项目标签
const fetchTags = async () => {
  try {
    const { data } = await getProjectTags()
    tags.value = data
  } catch (error) {
    console.error('获取项目标签失败:', error)
    ElMessage.error('获取项目标签失败')
  }
}

// 获取项目列表
const fetchProjects = async () => {
  try {
    const params = {
      tag: selectedTag.value,
      keyword: searchKeyword.value
    }
    const { data } = await getProjectList(params)
    console.log(data)
    projects.value = data
  } catch (error) {
    console.error('获取项目列表失败:', error)
    ElMessage.error('获取项目列表失败')
  }
}

// 处理标签切换
const handleTagChange = () => {
  fetchProjects()
}

// 处理搜索
const handleSearch = () => {
  fetchProjects()
}

// 处理下载
const handleDownload = (url, title) => {
  // 从 URL 中提取文件名
  const filename = title ? `${title}.md` : undefined
  downloadProject(url, filename)
}

onMounted(() => {
  fetchTags()
  fetchProjects()
})
</script>

<style scoped>
.project-library {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.project-list {
  margin-top: 20px;
}

.project-card {
  height: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.card-header {
  margin-bottom: 12px;
}

.card-header h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #303133;
}

.tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.card-content {
  flex: 1;
}

.card-content .description {
  color: #606266;
  font-size: 14px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.card-content .meta {
  color: #909399;
  font-size: 12px;
}

.card-content .meta span {
  display: block;
  margin-bottom: 4px;
}

.card-footer {
  margin-top: 16px;
  text-align: right;
}
</style>